<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我的</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<style>
			[v-cloak] {
				display: none;
			}
			
			html,
			body {
				background-color: #ffffff;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.myMoney {
				width: 90%;
				clear: both;
				border: 1px solid #fff;
				border-radius: 6px;
				margin: auto;
				margin-top: -45px;
				z-index: 1;
				position: relative;
				background: #fff;
				height: 75px;
				padding: 10px 0px;
				overflow: hidden;
				padding-bottom: 20px;
			}
			
			.order {
				border-top: 1px solid #dadada;
				border-bottom: 1px solid #dadada;
				width: 100%;
				margin-top: 10px;
				padding: 10px 0px;
				background: #fff;
			}
			
			.order span {
				float: left;
				width: 33.33%;
				text-align: center;
				overflow: hidden;
				display: block;
				padding: 10px 0px;
				font-size: 14px;
			}
			
			.order span strong {
				width: 100%;
				height: 20%;
				display: block;
				clear: both;
				margin: auto;
				color: #FF6600;
				font-size: 18px;
				font-weight: normal;
			}
			
			.icons a,
			.order span,
			.myMoney dl dd {
				color: #282633;
				font-size: 12px;
			}
			
			.myMoney dl dd strong {
				font-size: 18px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content" id="bizVue" v-cloak>
			<header class="my">
				<img :src="member.headImg" alt="头像" />
				<div class="info">
					<p class="name" style="color: white;">{{member.nickname}}</p>
				</div>
				<a @click="open('setting','../my/setting.html')" class="set" alt="设置"><img src="../images/icon-set.png" width="43" height="45"></a>
			</header>

			<!-- 资产 -->
			<section class="myMoney">
				<dl>
					<dd class="split" @click="vm.showText(0)"><strong>{{sumBalance}}</strong>金币</dd>
					<dd class="split" @click="vm.showText(1)"><strong>{{balance}}</strong>可用</dd>
					<dd @click="vm.showText(2)"><strong>{{blockedBalance}}</strong>冻洁</dd>
				</dl>
			</section>

			<section class="main order">
				<span class="dark-small"><strong>{{sendPacket}}</strong>今发包</span>
				<span class="dark-small"><strong>{{grabPacket}}</strong>今抢包</span>
				<span class="dark-small"><strong>{{landmine}}</strong>今中雷</span>
			</section>

			<!-- 工具集图标 -->
			<section class="main icons" style="border-bottom:none">
				<a href="#" @click="open('deposit','../my/deposit.html')"><img src="../images/deposit.png">充值</a>
				<a href="#" @click="open('withdraw','../my/withdraw.html')"><img src="../images/withdraw.png">提现</a>
				<a href="#" @click="open('recommend','../my/recommend.html')"><img src="../images/recommend.png">推广</a>
				<a href="#" @click="open('my-packet','../my/my-packet.html')"><img src="../images/packet.png">红包记录</a>
				<a href="#" @click="open('my-accounting','../my/my-accounting.html')"><img src="../images/accounting.png">金币明细</a>
				<a href="#" @click="open('my-team','../my/my-team.html')"><img src="../images/team.png">团队统计</a>
				<a href="#" @click="openTabNotice"><img src="../images/notice.png">系统公告</a>
				<!--<a href="#" @click="mymui('敬请期待......')"><img src="../images/tops.png">排行榜</a>-->
				<a href="#" @click="open('my-room','../my/my-rooms.html')"><img src="../images/myroom.png">我的房间</a>
				<a href="#" @click="open('setting','../my/setting.html')"><img src="../images/settings.png">设置</a>
			</section>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="../js/big.min.js"></script>
	<script type="text/javascript" src="../js/vue.min.js"></script>
	<script type="text/javascript" src="../js/public.js"></script>
	<script>
		mui.init({
			pullRefresh: {
				container: ".mui-content",
				down: {
					style: 'circle',
					callback: function() {
						vm.loadData();
						var timer = setInterval(function() {
							if(vm.loadFinish) {
								mui('.mui-content').pullRefresh().endPulldown();
								clearInterval(timer);
							}
						}, 100);
					}
				}
			}
		});
		var vm = new Vue({
			el: '#bizVue',
			data: {
				member: {},
				loadFinish: false,
				balance: 0,
				blockedBalance: 0,
				sumBalance: 0,
				sendPacket: 0,
				grabPacket: 0,
				landmine: 0
			},
			mounted: function() {
				mui.plusReady(function() {
					vm.loadData();
				});
			},
			methods: {
				loadData: function() {
					vm.loadFinish = false;
					//加载会员信息
					mui.postJSON(GetMemberInfo, {}, function(result) {
						if(result.code == 0) {
							plus.storage.setItem("member", JSON.stringify(result.member));
							vm.member = result.member;

							vm.balance = Math.floor(vm.member.balance * 100) / 100;
							vm.blockedBalance = Math.floor(vm.member.blockedBalance * 100) / 100;
							vm.sumBalance = Math.floor((vm.member.balance + vm.member.blockedBalance) * 100) / 100;
							
							if(!vm.member.mobile) {
								vm.open('bind-mobile','../my/bind-mobile.html');
							}
						}
						vm.loadFinish = true;
					});
					//订单统计
					mui.postJSON(OrderCount, {}, function(result) {
						if(result.code == 0) {
							vm.sendPacket = Math.abs(result.myCount.sendPacket);
							vm.grabPacket = result.myCount.grabPacket;
							vm.landmine = result.myCount.landmine;
						}
					});
				},
				open: function(vid, url) {
					mui.openWindow({
						id: vid,
						url: url,
						waiting: {
							autoShow: false
						}
					});
				},
				openTabNotice: function() { //打开公告
					mui.fire(plus.webview.getWebviewById('main'), 'goTabNotice', {});
				},
				showText: function(index) {
					if(index == 0) {
						mymui(Big(vm.member.balance).plus(vm.member.blockedBalance).toString());
					} else if(index == 1) {
						mymui(vm.member.balance);
					} else if(index == 2) {
						mymui(vm.member.blockedBalance);
					}
				}
			}
		});
	</script>

</html>